<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- js三种写入方式 -->
    <!-- <script>
        alert('hello')
        // 输入语句
        prompt('请输入你的年龄')
    </script> -->
    <!-- <button type="button" onclick="alert('欢迎!')">点我!</button><br> -->
    <!-- <script src="./js1.js"></script> -->

    <!-- <script>
        /*   // document.write(Date())
          // document.write('<h1>114514</h1>')
          // let uname = prompt('请输入你的姓名')
          // let age = prompt('请输入你的年龄')
          // let gender = prompt('请输入你的性别')
          // document.write(uname)
          // document.write(age)
          // document.write(gender) */

        // 数组的使用 -->
    <!-- let arr = ['one', 'two', 'three']
        console.log(arr[0])
        console.log(arr.length)
    </script> -->

    <!-- 
    <script>
        let num1 = 'hello'
        let num2 = 'hi'
        let temp
        temp = num1
        num1 = num2
        num2 = temp
        console.log(num1, num2)
    </script> -->

    <!-- <script>
        let age = 20 
        document.write(`我今年${age}了`)
    </script> -->


    <!-- 
    <script>
        let num1 = +prompt('请输入第一个数字:')
        let num2 = +prompt('请输入第二个数字:')
        alert(`两数字之和为:${num1 + num2}`)
    </script> -->


    <!-- <p id="demo">我的第一个段落。</p>
    <script>
    document.getElementById("demo").innerHTML="段落已修改。";
    </script> -->

    <!--  <p id="demo"></p>
    <script>
        document.getElementById("demo").innerHTML=('666')
    </script> -->

    <!-- 
    <script>
        let num = +prompt('请输入一个数字')
        alert(num / 4 ===0 && num % 100 !== 0)
    </script>
 -->

    <!--     <script>
        let money = prompt('请输入您的银行卡余额')
        if (money >= 100000) {
            alert('富哥你好')
        } else if (money >= 10000) {
            alert('帅哥你好')
        } else {
            alert('你好')
        }
    </script> -->

    <!-- <script>
        let num = +prompt('请输入你的个位数幸运数字')
        switch (num) {
            case (1):
                document.write('祝你一帆风顺')
                break
            case (2):
                document.write('花开富贵')
                break
            case (3):
                document.write('心有所想, 事有所成')
                break
            case (4):
                document.write('旗开得胜')
                break
            case (5):
                document.write('祝你五福临门')
                break
            case (6):
                document.write('祝你六六大顺')
                break
            case (7):
                document.write('祝你吉星高照')
                break
            case (8):
                document.write('恭喜发财')
                break
            case (9):
                document.write('万事如意')
                break
            default:
                document.write('谢谢参与')
                break
        }
    </script> -->
    <!-- 
    <script>
        let i = 1
        while (i<=6){
            document.write('循环六次<br>')
            i++
        }
    </script> -->

    <!--     <script>
        //求偶数和，奇数改为不等！==即可
        let i = 1
        let sum = 0
        while  (i <= 100){
            if (i % 2 ===0){
                sum += i
            }
            i++
        }
        document.write(sum + '<br>')
    </script> -->


    <!-- 九九乘法表 -->
    <!--     <script>
        for(let i = 1 ;i <= 9;i++){
            for(let j = 1 ;j <= i;j++){
                document.write(`<span>${i}×${j}=${i * j}</span>&nbsp`)
            }
            document.write('<br>')
        }
    </script> -->

    <!-- <script>
    function getSum(start = 0,end = 0){
        let sum = 0
        for(let i = start;i <= end;i++){
            sum +=i
        }
        document.write(sum)
    }
    getSum(50,100)
</script> -->

    <!-- <script>
    (function () {
        console.log(1)
    })()
</script> -->

    <!-- <script>
    let person = {
        name : 'le' ,
        age : '18' ,
        height : '180cm' ,
        gender : '男'
    }
    console.log(person)
    delete person.height
    console.log(person)
    console.log(person.name)
    //重点为下
    console.log(person['age'])
</script> -->

    <!-- <script>
    let x
    let y
    let obj = {
        name : 'jane',
        age : '16',
        song : function (x,y) {
            console.log(x + y)
        },
        dance : function(){}
    }

    obj.song(1,2)
    console.log(obj.name)
    console.log(obj['age'])

</script> -->

    <!-- <script>
    let obj ={
        name : 'Jane',
        age : '16',
        gender : 'man',
        hobby :'sing,dance,rap'
    }
    for(let k in obj){
        console.log(k)
        console.log(obj[k])
    }
</script> -->

    <!-- <script>
        //[0,1)
        console.log(Math.random()*10)
    </script> -->

    <!-- <script>
        let arr = ['red','green','blue','pink','white','black']
        let random = Math.floor(Math.random()*arr.length)
        console.log(arr[random])
        arr.splice(random,1)
        console.log(arr)
        console.log(arr[random])
    </script> -->

    <!-- <script>
        function getRandom(M, N) {
            return Math.floor(Math.random()*(M - N + 1)) + N
        }
        let random = getRandom(1, 10)
        console.log(random)
        let flag = true
        // while(true){
        for (let i = 0; i < 3; i++) {
            let num = +prompt("请输入你要猜的数字")
            if (num == random) {
                flag = false
                alert('恭喜你猜对了')
                break
            } else if (num > random) {
                alert('您猜大了')
            } else if (num < random) {
                alert('您猜小了')
            }
        }
        if(flag){
            alert('次数已用完')
        }
        // }
    </script> -->

    <!-- <style>
        *{
            list-style: none;
        }
        div{
            height: 200px;
            width: 200px;
        }
        .box{
            border: 2px solid blue;
        }
    </style>
    <div>
        <ul>
            <li>hello</li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        const div = document.querySelector('div')
        div.style.backgroundColor = 'red'
        div.style.width = '300px'
        const one = document.querySelectorAll('li')
        console.log(one)
        // one.document.innerText = 'Hello'
        // div.classList.add('box')
        //remove//toggle(切换)
        div.className = 'box'
    </script> -->


    <!-- <button class="btn" disabled>我已阅读协议（5）</button>
    <button>&lt;</button>
    <button>&gt;</button>

    <script>
        const btn = document.querySelector('.btn')
        let i = 5
        let n = setInterval(function(){
            i--
            btn.innerHTML = `我已阅读用户协议（${i}）`
            if(i === 0){
                clearInterval(n)
                btn.disabled = false
                btn.innerHTML = '同意'
                btn.addEventListener('click',function(){
                    alert('Hello')
                })
            }
        },1000)
    </script> -->

    <!-- <ul>
        <li>1</li>
        <li>12</li>
        <li>123</li>
        <li>1234</li>
        <li>12345</li>
    </ul>

    <script>
        let ul = document.querySelector('ul')
        console.log(ul)
        ul.addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                e.target.style.color = 'green'
            }
        })
    </script> -->

    <form action="http://www.baidu.com">
        <input type="submit" value="百度一下">
    </form>

    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit', function (e) {
            e.preventDefault()
        }) 
    </script>
</body>

</html>